高德官方图层

2024-05-08 17:13| 来源: 网络整理| 查看: 265

本章向您介绍高德官方提供的图层及其使用方法，官方图层包括：

标准图层 TileLayer 卫星图层 TileLayer.Satellite 路网图层 TileLayer.RoadNet 实时交通图层 TileLayer.Traffic 楼块图层 Buildings 室内地图 IndoorMap

其中楼块图层支持 IE9 以上的浏览器，其他图层支持所有浏览器。

标准图层

您可以按照如下方法声明和创建一个标准图层，然后给地图对象设置layers属性，将其添加到地图中。

JavaScript var layer = new AMap.TileLayer({ zooms:[3,20], //可见级别 visible:true, //是否可见 opacity:1, //透明度 zIndex:0 //叠加层级 }) var map = new AMap.Map('container',{ layers:[layer] //当只想显示标准图层时layers属性可缺省 });

如果在地图初始时您只需要标准图层，那么地图对象的layers属性可以缺省，我们将为您自动添加一个标准图层：

JavaScript var map = new AMap.Map('container');

亲手试一试

查看TileLayer的全部属性和方法

卫星与路网图层

卫星图层与路网图层通常一起使用，这两个图层的创建和使用方法和TileLayer类似，只需要修改类名为对应的类名即可。

JavaScript var satellite = new AMap.TileLayer.Satellite(); var roadNet = new AMap.TileLayer.RoadNet(); var map = new AMap.Map('container',{ zoom:10, layers:[ satellite, roadNet ] });

亲手试一试

查看全部属性和方法

实时交通图层

实时交通图层用于展示当前时刻的道路交通状况，不同的颜色代表不同的拥堵程度，暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。作为一种特殊的TileLayer，使用方法同卫星、路网等官方图层一样。特殊之处在于可以通过autoRefresh和interval参数指定是否自动刷新和刷新周期。

JavaScript var map = new AMap.Map('container',{ zoom:10 }) var traffic = new AMap.TileLayer.Traffic({ 'autoRefresh': true, //是否自动刷新，默认为false 'interval': 180, //刷新间隔，默认180s }); map.add(traffic); //通过add方法添加图层 //map.remove(traffic) //需要时可以移除

亲手试一试

查看全部属性和方法

楼块图层

楼块图层专门用来展示矢量的建筑物层，与标准图层中的楼块要素的效果相同，所以使用时应先通过features属性隐藏地图的默认楼块。二者区别在于，楼块图层显示的级别范围较标准图层中的楼块大，可以用来实现一些特殊的效果，3D 视图下还可以为楼块指定高度比例系数heightFactor。与其他图层不同，楼块图层的有效级别范围为 [ 15, 20 ] 。

JavaScript var buildings = new AMap.Buildings({ 'zooms':[16,18], 'zIndex':10, 'heightFactor':2//2倍于默认高度，3D下有效 });//楼块图层 var map = new AMap.Map('container', { center: [116.397428, 39.90923], viewMode:'3D', pitch:60, rotation:-35, features:['bg','road','point'],//隐藏默认楼块 mapStyle:'amap://styles/light', layers: [new AMap.TileLayer.Satellite(),//高德默认标准图层 buildings], zoom: 16 });

亲手试一试

查看全部属性和方法

室内地图默认室内图层

目前，高德地图 JS API 已经在多数浏览器中开启了矢量地图绘制，在这些浏览器上，我们默认会为添加展示室内图层（移动端默认不显示，需要通过设置showIndoorMap属性设置打开）。当地图处在合适的级别下，移动到有室内地图的地方就会自动显示室内地图。可以通过监听地图indoor_create 事件来获取这个室内图层，取得控制权。

JavaScript var map = new AMap.Map('mapDiv', { resizeEnable: true, center:[116.519942, 39.924677], zoom:18 }); map.on('indoor_create',function(){ map.indoorMap.showIndoorMap('B000A8VT15',4); })

亲手试一试

独立的室内图层

当然，也可以自己来创建室内图层，这时需要将地图的默认室内图层隐藏，如：

JavaScript AMap.plugin(['AMap.IndoorMap'], function() { var indoorMap = new AMap.IndoorMap({alwaysShow:true}); //设定在没有矢量底图的时候也显示，默认情况下室内图仅在有矢量底图的时候显示 var map = new AMap.Map('mapDiv', { resizeEnable: true, showIndoorMap:false,//隐藏地图自带的室内地图图层 layers:[indoorMap,new AMap.TileLayer()] }); indoorMap.showIndoorMap('B000A856LJ'); });

查看室内地图详细接口文档

亲手试一试

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章